<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
   
    <script src="./js/jquery-1.12.2.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 头部导航模块 -->
    <div class="header-nav">
        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="hd-nav">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/find.png" alt="">发现</a>
                </li>
                <li>
                    <a href="search.html">
                        <img src="./images/search.png" alt="">搜索</a>
                </li>
                <li>
                    <a href="sheji.html">
                        <img src="./images/sheji.png" alt="">我的设计</a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/shoucang.png" alt="">收藏夹</a>
                </li>
            </ul>
        </div>
        <div class="hd-right">
            <div class="free">免费试用专业版
                <span>优惠</span>
            </div>

            <div class="wenhao">
                <a href="#">
                    <img src="./images/wenhao.png" alt="">
                </a>
                  <!-- 问号的弹出对话框开始 -->
                  <div class="question">
                        <ul>
                            <li><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                            <li><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                            <li><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                            <li><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                            <li class="bottom"><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                            <li class="bottom"><img src="./images/kefu.png" alt=""><h2>联系客服</h2></li>
                        </ul>
                    </div>
            </div>
  
            <div class="create">创建
                <span>new</span>
            </div>
            <div class="message">
                <img src="./images/message.png" alt="">
               
            </div>
            <div class="panel">哈
                <div class="hongbao">
                    <img src="./images/hpongbao.png" alt="">
                </div>
                <div class="saojiao">
                    <img src="./images/saojiao.png" alt="">
                </div>
             
            </div>
        
                  
            <!-- 问号的弹出对话框结束 -->
        </div>
    </div>
    <!-- 免费试用专业版弹出模块 -->
    <div class="tanchu">
            <div class="upgrade">
                <div class="cancel"></div>
                <p>升级专业版 / Upgrade to PRO</p>
                <div class="upgrade-left">
                    <p>
                        <span>专业版</span>
                        <span>基础版</span>
                    </p>
                    <div class="upgrade-form">
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                        <div class="list">
                            <div class="list-left">画布编辑与模板功能</div>
                            <div class="list-m">无限</div>
                            <div class="list-r">无限</div>
                        </div>
                    </div>
                </div>
                <!-- 右边模块 -->
                <div class="upgrade-right">
                    <div class="mianfei">
                        <h3>30天免费专业版</h3>
                        <h4>立刻使用</h4>
                    </div>
                    <div class="mianfei buy">
                        <h3>低至99元/年</h3>
                        <h4>直接购买</h4>
                    </div>
                    <div class="continue">
                        暂不升级，继续使用基础版
                    </div>
                </div>
            </div>
    
        </div>
    <!-- 免费试用专业版弹出模块 -->

    <!-- 个人设置模块开始 -->
        <div class="personal">
            <div class="per-h">
                 <div class="touxiang">Q</div>
                 <div class="message">
                <span>qingtian</span>
                <p>查看个人公开页</p>
            </div>
            </div>
            <div class="fans">
                <ul>
                    <li><span>0</span><p>设计</p><span class="line"></span></li>
                    <li><span>0</span><p>单品</p><span class="line"></span></li>
                    <li><span>0</span><p>关注</p><span class="line"></span></li>
                    <li><span>0</span><p>粉丝</p></li>
                </ul>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#">升级专业版</a></li>
                    <li><a href="#">个人资料<span>认证即享新手礼红包</span></a></li>
                    <li><a href="#">我的账户</a></li>
                    <li><a href="#">新手教程</a></li>
                    <li><a href="#">注销</a></li>
                </ul>
            </div>
        </div>
    <!-- 个人设置模块结束 -->

    <!-- 消息部分模块开始 -->
    <div class="inform">

                        
        </div>
      <!-- 消息部分模块结束 -->
    <!-- 头部模块 -->
    <div class="header">
        <h3>寻找你的创作灵感</h3>
        <h5>浏览其他设计师的作品，分享你的设计杰作</h5>
    </div>
    
    
        <!-- 弹窗 -->
            <div class="tanchuang">
                <p class="detailViewer"><span></span></p>
                <div class="booths">
                    <div class="booth1">
                    <div class="booth1_1">
                        <div style="overflow: hidden;">					
                            <div class="booth1_1_1" >
                                <div class="zuo1"></div>
                                <div class="aaa"><img src="images/aaaa.jpeg"></div>
                                <div class="you1"></div>
                            </div>
                            <div class="booth1_1_2">
                                <div class="booth1_1_2_1">
                                    <h1>一层次卧</h1>
                                    <p>#简约 #卧室</p>
                                    <div class="algin">再创作</div>
                                    <div class="sc">收藏</div>
                                    <div class="BoardDetailPanel">
                                        <span style="background: url(images/fasong.png);"></span>
                                        <span style="background: url(images/gengduo.png);"></span>
                                        <span style="background: url(images/xin1.png);float: right;"></span>
                                    </div>
                                </div>
                                <div class="booth1_1_2_2">
                                    <span>作者</span>
                                    <span>+ 关注</span>
                                    <div style="margin-top: 10px;border-bottom: 1px solid rgba(0,0,0,0.1);overflow:hidden;"	>
                                        <span style="background: url(images/tt.jpg) no-repeat;background-position: center;	background-size: contain;" class="tt"></span>
                                        <div class="namess">
                                            <span>Paruru丶</span>
                                            <span>更新于 09-13</span>
                                        </div>								
                                    </div>
                                    <div class="zan">
                                        <p>38人赞了</p>
                                        <ul>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                            <li></li>
                                        </ul>
                                        <p title="查看更多">···</p>		
                                    </div>
                                    <div class="ping">
                                        <p>最新评论</p>
                                        <div>
                                        
                                        </div>
                                        <div class="lun">
                                            <span style="background: url(images/tt.jpg) no-repeat;background-position: 	center;background-size: contain;" class="imgs"></span>
                                            <input type="text" placeholder="说些什么，留下你的见解" class="texts">
                                            <div class="jiantou"></div>
        
                                        </div>
                                    </div>
                                </div>						
                            </div>
                        </div>
                        <div class="booth1_2">
                            <p class="danping">单品列表</p>
                            <div class="ItemBox">
                                <ul>
                                    <li>
                                        <div title="收藏"></div>
                                        <span style="background: url(images/danping.jpg);"></span>
                                        <p>Seletti</p>
                                        <p>￥644</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping2.jpg);"></span>
                                        <p>INK+IVY</p>
                                        <p>￥159</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping3.jpg);"></span>
                                        <p>一颗苹果</p>
                                        <p>巧克力月饼</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping.jpg);"></span>
                                        <p>Seletti</p>
                                        <p>￥644</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping2.jpg);"></span>
                                        <p>INK+IVY</p>
                                        <p>￥159</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping3.jpg);"></span>
                                        <p>一颗苹果</p>
                                        <p>巧克力月饼</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping.jpg);"></span>
                                        <p>Seletti</p>
                                        <p>￥644</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping2.jpg);"></span>
                                        <p>INK+IVY</p>
                                        <p>￥159</p>								
                                    </li>
                                    <li>
                                        <div  title="收藏"></div>
                                        <span style="background: url(images/danping3.jpg);"></span>
                                        <p>一颗苹果</p>
                                        <p>巧克力月饼</p>								
                                    </li>
                                
                                </ul>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>		
            </div>
        <!-- 返回顶部 -->
        <div class="gotop"></div>
     <!-- 内容模块 -->
    <div class="content container">
            <div class="content_left">
                <div class="left_head">拼图精选</div>
                <div class="left_centent">
                    <div>
                        <img src="images/01.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p><span class="yuanchaung"></span>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/02.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/03.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/04.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>	
                    <div>
                        <img src="images/05.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/06.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/05.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/03.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/04.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/05.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/06.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                    <div>
                        <img src="images/05.jpeg">
                        <div class="names">
                            <span></span>
                            <span>
                                <p class="p1">娘娘工作号</p>
                                <p class="p2">18人赞了</p>
                            </span>
                            <img title="点赞">
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_right">
                <div class="left_head">美间资讯</div>
                <!-- 广告条 -->
                <div class="banner">
                    <div class="zuo"></div>
                    <div class="you"></div>
                    <ul>
                        <li><img src="images/ban5.jpg"></li>
                        <li><img src="images/ban1.jpg"></li>
                        <li><img src="images/ban2.jpg"></li>
                        <li><img src="images/ban3.jpg"></li>
                        <li><img src="images/ban4.png"></li>
                        <li><img src="images/ban5.jpg"></li>
                        <li><img src="images/ban1.jpg"></li>
                    </ul>
                </div>
                <!-- 热门品牌 -->
                <div class="hot">
                    <div class="left_head">热门品牌</div>
                    <div class="huan"><img src="images/huan.png">&nbsp;&nbsp;换一换</div>				
                </div>
                <div>
                    <div class="hot_product">
                        <div class="geren">
                            <div><img src="images/hottou.jpg"></div>
                            <div style="position: relative;">
                                <p>寓意家居-...</p>
                                <p>柔软 简单 朴质 玄妙</p>
                                <div class="shoucang">收藏</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/hot_1.jpg);"></span>
                            <span style="background: url(images/hot_2.jpg);"></span>
                            <span style="background: url(images/hot_3.jpg);"></span>
                        </div>
                    </div>
                    <div class="hot_product">
                        <div class="geren">
                            <div><img src="images/hottou.jpg"></div>
                            <div style="position: relative;">
                                <p>寓意家居-...</p>
                                <p>柔软 简单 朴质 玄妙</p>
                                <div class="shoucang">收藏</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/hot_1.jpg);"></span>
                            <span style="background: url(images/hot_2.jpg);"></span>
                            <span style="background: url(images/hot_3.jpg);"></span>
                        </div>
                    </div>
                    <div class="hot_product">
                        <div class="geren">
                            <div><img src="images/hottou.jpg"></div>
                            <div style="position: relative;">
                                <p>寓意家居-...</p>
                                <p>柔软 简单 朴质 玄妙</p>
                                <div class="shoucang">收藏</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/hot_1.jpg);"></span>
                            <span style="background: url(images/hot_2.jpg);"></span>
                            <span style="background: url(images/hot_3.jpg);"></span>
                        </div>
                    </div>
                    
                </div>
                
    
                <!-- 设计达人 -->
                <div class="hot">
                    <div class="left_head">设计达人</div>
                    <div class="huan"><img src="images/huan.png">&nbsp;&nbsp;换一换</div>			
                </div>
                <div>
                    <div class="sheji">
                        <img src="images/shejitou.jpg">
                        <div style="position: relative;">
                            <p>小小小艺术家</p>
                            <span>女</span>
                            <span>宁波</span>
                            <span>软装设计师</span>
                            <div class="guanzhu">关注</div>
                        </div>
                    </div>
                    <div class="sheji">
                        <img src="images/shejitou.jpg">
                        <div style="position: relative;">
                            <p>天上有年</p>
                            <span>女</span>
                            <span>北京</span>
                            <span>软装设计师</span>
                            <div class="guanzhu">关注</div>
                        </div>
                    </div>
                    <div class="sheji">
                        <img src="images/shejitou.jpg">
                        <div style="position: relative;">
                            <p>易水</p>
                            <span>男</span>
                            <span>郑州</span>
                            <span>设计师</span>
                            <div class="guanzhu">关注</div>
                        </div>
                    </div>				
                </div>
    
                <!-- 热门商店联系人 -->
                <div class="hot">
                    <div class="left_head">热门商店联系人</div>
                    <div class="huan"><img src="images/huan.png">&nbsp;&nbsp;换一换</div>			
                </div>
                <div>
                    <div class="hotshop">
                        <div class="shop">
                            <img src="images/shoptou.jpg">
                            <div style="position: relative;">
                                <p>香港溢棋崃软装杭州店</p>
                                <span>粉丝</span>
                                <span>152</span>
                                <div class="guanzhu">关注</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/shop1.jpg);"></span>
                            <span style="background: url(images/shop2.jpg);"></span>
                            <span style="background: url(images/shop3.jpg);"></span>
                        </div>
                    </div>
                    <div class="hotshop">
                        <div class="shop">
                            <img src="images/shoptou.jpg">
                            <div style="position: relative;">
                                <p>香港溢棋崃软装杭州店</p>
                                <span>粉丝</span>
                                <span>152</span>
                                <div class="guanzhu">关注</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/shop1.jpg);"></span>
                            <span style="background: url(images/shop2.jpg);"></span>
                            <span style="background: url(images/shop3.jpg);"></span>
                        </div>
                    </div>
                    <div class="hotshop">
                        <div class="shop">
                            <img src="images/shoptou.jpg">
                            <div style="position: relative;">
                                <p>香港溢棋崃软装杭州店</p>
                                <span>粉丝</span>
                                <span>152</span>
                                <div class="guanzhu">关注</div>
                            </div>
                        </div>
                        <div class="zhanshi">
                            <span style="background: url(images/shop1.jpg);"></span>
                            <span style="background: url(images/shop2.jpg);"></span>
                            <span style="background: url(images/shop3.jpg);"></span>
                        </div>
                    </div>
                </div>
    
                <!-- 主题精选 -->
                <div class="hot">
                    <div class="left_head">主题精选</div>			
                </div>
                <div class="zhuti">
                    <div>
                        <p>办公椅 | grado格度</p>
                        <div class="zhutiimg">
                            <span style="background: url(images/yizi1.jpg);"></span>
                            <span style="background: url(images/yizi2.jpg);"></span>
                            <span style="background: url(images/yizi3.jpg);"></span>
                            <span style="background: url(images/yizi1.jpg);"></span>
                            <span style="background: url(images/yizi2.jpg);"></span>
                            <span style="background: url(images/yizi3.jpg);"></span>
                            <span style="background: url(images/yizi1.jpg);"></span>
                            <span style="background: url(images/yizi2.jpg);"></span>
                            <span style="background: url(images/yizi3.jpg);"></span>
                        </div>
                    </div>
                    <div>
                        <p>美式复古摆件</p>
                        <div class="zhutiimg">
                            <span style="background: url(images/meishi1.jpg);"></span>
                            <span style="background: url(images/meishi2.jpg);"></span>
                            <span style="background: url(images/meishi3.jpg);"></span>
                            <span style="background: url(images/meishi1.jpg);"></span>
                            <span style="background: url(images/meishi2.jpg);"></span>
                            <span style="background: url(images/meishi3.jpg);"></span>
                            <span style="background: url(images/meishi1.jpg);"></span>
                            <span style="background: url(images/meishi2.jpg);"></span>
                            <span style="background: url(images/meishi3.jpg);"></span>
                        </div>
                    </div>
                    <div>
                        <p>新古典家具系列</p>
                        <div class="zhutiimg">
                            <span style="background: url(images/jiaju1.jpg);"></span>
                            <span style="background: url(images/jiaju2.jpg);"></span>
                            <span style="background: url(images/jiaju3.jpg);"></span>
                            <span style="background: url(images/jiaju1.jpg);"></span>
                            <span style="background: url(images/jiaju2.jpg);"></span>
                            <span style="background: url(images/jiaju3.jpg);"></span>
                            <span style="background: url(images/jiaju1.jpg);"></span>
                            <span style="background: url(images/jiaju2.jpg);"></span>
                            <span style="background: url(images/jiaju3.jpg);"></span>
                        </div>
                    </div>
                    <div>
                        <p>luxury 奢适摆件意向</p>
                        <div class="zhutiimg">
                            <span style="background: url(images/renyi1.jpg);"></span>
                            <span style="background: url(images/renyi2.jpg);"></span>
                            <span style="background: url(images/renyi3.jpg);"></span>
                            <span style="background: url(images/renyi1.jpg);"></span>
                            <span style="background: url(images/renyi2.jpg);"></span>
                            <span style="background: url(images/renyi3.jpg);"></span>
                            <span style="background: url(images/renyi1.jpg);"></span>
                            <span style="background: url(images/renyi2.jpg);"></span>
                            <span style="background: url(images/renyi3.jpg);"></span>
                        </div>
                    </div>				
                </div>			
            </div>
        </div>
   

</body>

</html>